<template>
  <div class="content-view" style="padding:20px 5px">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template #title>
          <img src="../../assets/imgs/assist/a1.png" style="width: 120px;"/>
          <b class="title-txt">{{anyDesk.title}}</b>
        </template>
        <div>
          <el-tag size="large" type="success" effect="dark">Android端远程工具</el-tag>
          <p><el-text size="large">1、安卓终端设备进入<img src="../../assets/imgs/assist/s.png"  style="width: 56px;margin-bottom:-20px;"/>安装AnyDesk远程工具</el-text></p>
          <p><img src="../../assets/imgs/assist/a3.jpg" /></p>
          <p><el-text size="large">2、查看安卓终端设备上的AnyDesk地址</el-text></p>
          <p><img src="../../assets/imgs/assist/a4.jpg" style="width: 95%;"/></p>
          <el-tag size="large" effect="dark">Windows端远程工具</el-tag>
          <p><el-text size="large">1、<a :href="anyDesk.url" target="_blank">下载</a>Windows端远程工具</el-text></p>
          <p><el-text size="large">2、按下图连接安卓终端设备进行远程协助</el-text></p>
          <p><img src="../../assets/imgs/assist/a2.jpg" /></p>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <img src="../../assets/imgs/assist/t1.jpg" class="title-icon"/>
          <b class="title-txt">{{teamViewer.title}}</b>
        </template>
        <div>
          <el-tag size="large" type="success" effect="dark">Android端远程工具</el-tag>
          <p><el-text size="large">1、安卓终端设备进入<img src="../../assets/imgs/assist/s.png"  style="width: 56px;margin-bottom:-20px;"/>安装TeamViewer远程工具</el-text></p>
          <p><img src="../../assets/imgs/assist/t3.jpg" /></p>
          <p><el-text size="large">2、查看安卓终端设备上的TeamViewer ID</el-text></p>
          <p><img src="../../assets/imgs/assist/t4.png" style="width: 95%;"/></p>
          <el-tag size="large" effect="dark">Windows端远程工具</el-tag>
          <p><el-text size="large">1、<a :href="teamViewer.url" target="_blank">下载</a>Windows端远程工具</el-text></p>
          <p><el-text size="large">2、按下图登录并连接安卓终端设备进行远程协助</el-text></p>
          <p><img src="../../assets/imgs/assist/t2.png" /></p>
        </div>
      </el-collapse-item>
    </el-collapse>    
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
export default {
  components: { 

  },
  props:['data'],
  setup(props,ctx) {
    const Global = getCurrentInstance().proxy
    let user = reactive({
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
    })

    onMounted(()=>{
      // init()
    })

    let activeNames = ref('0')
    let anyDesk = reactive({
      title: '',
      url: 'https://anydesk.com/zhs/downloads/thank-you?dv=win_exe',
    })
    let teamViewer = reactive({
      title: 'TeamViewer',
      url: 'https://download.teamviewer.com/download/TeamViewer_Setup_x64.exe',
    })

    return{
      user, activeNames, anyDesk, teamViewer
    }
  },
}
</script>

<style lang="scss" scoped>
.content-view{
  overflow-y: auto;
  padding: 0 10px;
  .title-txt{
    font-size: 20px;
    letter-spacing: -1px;
  }
  .title-icon{
    width: 30px;
  }
}
</style>